<template>
  <child-page>
    <div class="components-form-demo-advanced-search">
      <a-form
        class="ant-advanced-search-form"
        :form="form"
        @submit="handleSubmit"
      >
        <a-form-item v-bind="formItemLayout" label="用户名">
          <a-input v-decorator="['username', { rules: rule.nickName }]" />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="账号密码">
          <a-input
            type="password"
            v-decorator="[
              'password',
              {
                rules: [
                  { required: true, message: '必填项' },
                  { validator: validateToNextPassword }
                ]
              }
            ]"
          />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="确认密码">
          <a-input
            type="password"
            v-decorator="[
              'repassword',
              {
                rules: [
                  { required: true, message: '必填项' },
                  { validator: compareToFirstPassword }
                ]
              }
            ]"
            @blur="handleConfirmBlur"
          />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="姓名">
          <a-input v-decorator="['true_name', { rules: rule.userName }]" />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="手机号">
          <a-input v-decorator="['mobile', { rules: rule.phone }]" />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="角色">
          <a-select v-decorator="['role_id', { rules: rule.role }]">
            <a-select-option
              v-for="(item, index) in roleList"
              :key="index"
              :value="item.id"
              >{{ item.title }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-row>
          <a-col :span="24" :style="{ textAlign: 'center' }">
            <a-button type="primary" html-type="submit">
              提交
            </a-button>
            <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
              重置
            </a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </child-page>
</template>

<script>
import childPage from "@/components/childPageContent/index";
export default {
  name: "add",
  components: {
    childPage
  },
  data() {
    return {
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      athList: [],
      statusOption: [{ label: "在用", value: 1 }, { label: "停用", value: 2 }],
      sexOption: [{ label: "男", value: 1 }, { label: "女", value: 2 }],
      rule: {
        nickName: [
          { required: true, message: "必填项" },
          { validator: this.$validate.validateLength, max: 15, min: 1 }
        ],
        userName: [{ required: true, message: "必填项" }],
        email: [{ validator: this.$validate.validateEmail }],
        phone: [{ validator: this.$validate.validatePhoneNumber }],
        role: [{ required: true, message: "必填项" }]
      },
      initInfo: {
        status: 1
      },
      roleList: []
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((error, values) => {
        if (!error) {
          let form = JSON.parse(JSON.stringify(values));
          this.$ajax
            .post(this.$api.userAdd, form)
            .then(() => {
              this.$notification.success({
                message: "新增用户成功！"
              });
              this.$router.push({ name: "authorityUser" });
            })
            .catch(err => {
              this.$notification.error({
                message: err
              });
            });
        } else {
          return false;
        }
      });
    },
    handleConfirmBlur(e) {
      const value = e.target.value;
      this.confirmDirty = this.confirmDirty || !!value;
    },
    validateToNextPassword(rule, value, callback) {
      const form = this.form;
      if (value && this.confirmDirty) {
        form.validateFields(["repassword"], { force: true });
      }
      callback();
    },
    compareToFirstPassword(rule, value, callback) {
      const form = this.form;
      if (value && value !== form.getFieldValue("password")) {
        callback("两次密码不一致!");
      } else {
        callback();
      }
    },
    getRole() {
      this.$ajax
        .post(this.$api.getAuthRole, { type: 1 })
        .then(res => {
          this.roleList = res.role_list;
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    },
    handleReset() {
      this.form.resetFields();
    },
    normFile(e) {
      if (Array.isArray(e)) {
        return e;
      }
      return e && e.fileList;
    }
  },
  created() {
    this.getRole();
  }
};
</script>

<style scoped lang="less"></style>
